<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf8" />
    <meta id="viewport" name="viewport"
        content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;" />
    <title></title>


    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">


    <style type="text/css">
        body,
        p,
        ul,
        li,
        h1,
        h2,
        form,
        input {
            margin: 0;
            padding: 0;
        }

        h1,
        h2 {
            font-size: 100%;
        }

        ul {
            list-style: none;
        }

        body {
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: Helvetica;
            background: #ECECEC;
        }

        html,
        body {
            height: 100%;
        }

        a,
        button,
        input,
        img {
            -webkit-touch-callout: none;
            outline: none;
        }

        a {
            text-decoration: none;
        }


        .hide {
            display: none !important;
        }

        .cf:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        a[class*="btn"] {
            display: block;
            height: 42px;
            line-height: 42px;
           color: #FFFFFF;
             /* color: #3cc51f; */

            text-align: center;
            border-radius: 5px;
        }

        .btn-blue {
            background: #3D87C3;
            border: 1px solid #1C5E93;
        }

        .btn-green {
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43C750), color-stop(1, #31AB40));
            border: 1px solid #2E993C;
            box-shadow: 0 1px 0 0 #69D273 inset;
        }

        .charge {
            font-family: Helvetica;
            padding-bottom: 10px;
            -webkit-user-select: none;
        }

        .charge h1 {
            height: 44px;
            line-height: 44px;
            color: #FFFFFF;
            background: #3D87C3;
            text-align: center;
            font-size: 20px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .charge h2 {
            font-size: 14px;
            color: #777777;
            margin: 5px 0;
            text-align: center;
        }

        .charge .content {
            padding: 10px 12px;
        }

        .charge .select li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }

        .charge .price {
            border-bottom: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
        }

        .charge .price strong {
            font-weight: normal;
            color: #EE6209;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .showaddr {
            border: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
            text-align: center;
        }

        .charge .showaddr strong {
            font-weight: normal;
            color: #9900FF;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .copy-right {
            margin: 5px 0;
            font-size: 12px;
            color: #848484;
            text-align: center;
        }


        .charge .selectImg li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <article class="charge">
        <h1>请等待。。。</h1>
        <section id="content" class="content" style="display: none">
            <h2></h2>
            <ul class="select cf">
                <li><img src="/img/weixin.jpg" style="width:150px;height:150px"></li>
            </ul>
            <p class="copy-right"></p>
            <div id="operation" class="operation"><a class="btn-green" id="back">返回</a></div>
        </section>
    </article>
    <article class="charge" style="display: none">
        <h1>微信支付购买</h1>
        <section class="content">
            <h2>商品：会员服务。</h2>
            <ul class="select cf">
                <li><img src="/img/weixin.jpg" style="width:150px;height:150px"></li>
            </ul>
            <p class="copy-right">亲，此商品不提供退款和发货服务哦</p>
            <div class="price">微信价：<strong>￥[[${order.moneyStr}]]元</strong></div>
            <div class="operation"><a class="btn-green" id="getBrandWCPayRequest">立即购买</a></div>
            <input type="hidden" th:value="${order.orderId}" id="orderId" />
            <input type="hidden" th:value="${order.tradeType}" id="tradeType" />
            <input type="hidden" th:value="${callbackUrl}" id="callbackUrl" />
            <input type="hidden" th:value="${xml}" id="xml" />

            <p class="copy-right">微信支付购买</p>
        </section>

    </article>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="/js/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<script type="text/javascript">


    $(function () {

        function onBridgeReady() {
            WeixinJSBridge.call('hideOptionMenu');
        }

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }

        $("#back").click(function () {
            window.location.href = $('#callbackUrl').val();
        });

        function pay() {
            var orderId = $("#orderId").val();
            var tradeType = $("#tradeType").val();
            console.log("orderId=" + orderId + ",tradeType=" + tradeType);
            $.showLoading("加载中");
            $.ajax({
                type: "post",
                url: "/pay/createOrder",
                data: {
                    "orderId": orderId,
                    "tradeType": tradeType
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*错误信息处理*/
                    $.toast("系统异常", 3000);
                },
                success: function (r) {
                    $.hideLoading();
                    if (r.code === 0) {
                        let rep = r.data;
                        if (rep.type === 'JSAPI') {
                            var data = rep.data;
                            if (data.mock === false) {
                                WeixinJSBridge.invoke(
                                    'getBrandWCPayRequest', {
                                    "appId": rep.data.appId,     //公众号名称，由商户传入
                                    "timeStamp": rep.data.timeStamp,         //时间戳，自1970年以来的秒数
                                    "nonceStr": rep.data.nonceStr, //随机串
                                    "package": rep.data.packageValue,
                                    "signType": rep.data.signType,         //微信签名方式：
                                    "paySign": rep.data.paySign //微信签名
                                },
                                    function (res) {
                                        if (res.err_msg === "get_brand_wcpay_request:ok") {
                                            // 使用以上方式判断前端返回,微信团队郑重提示：
                                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                            $.toast("支付成功", 2000);
                                            window.location.href = $('#callbackUrl').val();
                                        } else if (res.err_msg === "get_brand_wcpay_request：cancel") {
                                            $.toast("取消支付,返回页面", 2000);
                                            $("#content").css("display", "block");
                                        } else {
                                            $.toast("支付失败,返回页面", 2000);
                                            $("#content").css("display", "block");
                                        }
                                    });

                            } else {
                                //mock
                                var notifyUrl = data.notifyUrl;
                                var payNo = data.payNo;
                                //如果参数过多，建议通过 object 方式传入
                                $.confirm({
                                    title: 'mock',
                                    text: 'mock',
                                    onOK: function () {
                                        $.ajax({
                                            type: "post",
                                            url: "/pay/notify/mockNotify",
                                            data: {
                                                "orderId": orderId,
                                            },
                                            error: function (jqXHR, textStatus, errorThrown) {
                                                /*错误信息处理*/
                                                $.toast("系统异常", 3000);
                                            },
                                            success: function (data) {
                                                $.toast("支付成功", 2000);
                                                window.location.href = $('#callbackUrl').val();
                                            }
                                        });

                                    },
                                    onCancel: function () {

                                    }
                                });
                            }
                        }
                    } else {
                        $.toast("系统异常", 3000);
                    }
                }
            });
        }

        pay();

        $('#getBrandWCPayRequest').on('click', function () {
            pay();
        });
    });
    // loading
    $(function () {
        var $loadingToast = $('#loadingToast');
        $('#showLoadingToast').on('click', function () {
            if ($loadingToast.css('display') !== 'none') return;
            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 2000);
        });
    });
</script>

</html>